// src/APP.vue

<template>
<div id="blog-posts-demo">
  <blog-post
    v-for="post in posts"
    :key="post.id"
    :title="post.title"
  ></blog-post>
</div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
import BlogPost from './components/blog-post.vue'

export default defineComponent({
  name:"APP",
  components: {
    BlogPost
  },
  setup() {
    const posts = reactive(
      [
        { id: 1, title: 'My journey with Vue1' },
        { id: 2, title: 'Blogging with Vue2' },
        { id: 3, title: 'Why Vue is so fun3' }
      ]
    )

    return {
      posts
    }
  }
})
</script>